<template>
	<view class="page">
		<view class="doctor-evaluation-info">
			<view class="top-title">您对本次的陪诊师满意吗？</view>
			<view class="doctor-details">
				<image class="doctor-image" :src="userInfo.photo" mode="aspectFill"></image>
				<view class="doctor-info">
					<view class="doctor-name">{{ userInfo.name }}</view>
					<view class="doctor-score">
						<!-- <image
							class="score-icon"
							v-for="(item, index) in 5"
							:key="index"
							:src="index < 3 ? '../../../static/images/gradeone@3x.png' : '../../../static/images/gradetwo@3x.png'"
						></image> -->
						<uni-rate :touchable="false" :value="5" @change="onChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate-content">
			<textarea v-model="parmes.commentContent" class="textarea" maxlength="-1" placeholder="请输入评价内容..." placeholder-style="color:#C3C3C3"></textarea>
		</view>
		<view class="appraise" @click="anonymity">
			<image class="agreement-icon" v-if="parmes.type == 1" src="/static/images/selected@3x.png"></image>
			<image class="agreement-icon" v-else src="/static/images/NotselectedXXD@3x.png"></image>
			<text>匿名评价</text>
		</view>
		<view class="submit-btn" @click="submit">提交评价</view>
	</view>
</template>

<script>
import { saveByParam, getEscortDetail } from '@/apis/request.js';
export default {
	data() {
		return {
			userInfo: '', //陪诊师信息
			parmes: {
				level: 5,
				commentContent: '',
				orderId: '',
				type: 0 // 0普通评价 1匿名评价
			},
			escortId: '' //陪诊师id
		};
	},
	onLoad(options) {
		this.parmes.orderId = options.orderId;
		this.escortId = options.escortId;
		this.getEscortDetail();
	},
	methods: {
		onChange(e) {
			this.parmes.level = e.value;
		},
		submit() {
			saveByParam(this.parmes).then(res => {
				uni.showToast({
					title: '评价成功',
					icon: 'none'
				});
				setTimeout(function() {
					uni.navigateBack();
				}, 500);
			});
		},
		getEscortDetail() {
			getEscortDetail({
				escortId: this.escortId
			}).then(res => {
				this.userInfo = res;
			});
		},
		anonymity() {
			this.parmes.type == 0 ? (this.parmes.type = 1) : (this.parmes.type = 0);
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;
	.doctor-evaluation-info {
		background-color: #fff;
		.top-title {
			padding: 30rpx 0 0 30rpx;
			font-size: 34rpx;
			color: #020202;
			font-weight: bold;
		}
		.doctor-details {
			padding: 30rpx;
			display: flex;
			.doctor-image {
				flex-shrink: 0;
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
			}
			.doctor-info {
				margin-left: 20rpx;
				.doctor-name {
					font-size: 30rpx;
				}
				.doctor-score {
					.score-icon {
						width: 22rpx;
						height: 22rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.evaluate-content {
		border-top: 2rpx solid #ededed;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;

		.textarea {
			width: 100%;
		}
	}

	.submit-btn {
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background: #32C59A;
		color: #fff;
		text-align: center;
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.appraise {
		padding: 10rpx 14rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text {
			margin-left: 8rpx;
			font-size: 26rpx;
		}
		image {
			width: 26rpx;
			height: 26rpx;
		}
	}
}
</style>
